<template>
  <view class="m-position">
    <view class="postName">
      <view class="bl"></view>{{ detail.bangbType }}
      <text class="status inprogress">进行中</text>
    </view>
    <view class="info-box dev-box">
      <view class="mark">基本信息</view>
      <view class="right">
        <text class="right">{{ detail.money }}星币</text>
      </view>
      <view class="info-item" style="padding-top: 90upx">
        <text class="t">服务类型：</text>{{ detail.mode }}
      </view>
	  <view class="info-item">
	    <text class="t">状态：</text>{{ detail.urgent == '0' ? '正常' : '加急'  }}
	  </view>
      <view class="info-item">
        <text class="t">标题：</text>{{ detail.title }}
      </view>
      <view class="info-item">
        <text class="t">需求备注：</text>{{ detail.describes }}
      </view>
      <view class="info-item">
        <text class="t">手机号：</text>{{ detail.mobile }}
      </view>
      <view class="info-item">
        <text class="t">微信：</text>{{ detail.wx }}
      </view>
      <view class="info-item">
        <text class="t">发布时间：</text
        >{{ formatCreateTime(detail.createTime) }}
      </view>
      <view class="info-item">
        <text class="t">截止时间：</text>{{ formatCreateTime(detail.endTime) }}
      </view>
	   <view class="info-item">
	  <view class="text" style="text-align-last: left; text-align: left"
	    >需求描述:</view>
	  
       <textarea
            v-model="detail.describes"
            type="text"
            maxlength="300"
            name="describes"
          ></textarea>
		  <view class="text" style="text-align-last: left; text-align: left"
		    >注意事项:为了您的财产安全，请勿私下交易，私下交易平台不保证财产安全。
			
			</view
		  >
 </view>
      <hr />
    </view>
    <view class="btn-box">
      <button v-if="detail.payState && detail.state==0" class="enroll-btn" @click="bbreturnMoney">
        申请退款
      </button>
	  
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
import { formatDate } from '@/common/date';
import config from '@/config/index.config.js';
export default {
  components: {},
  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['hasLogin']),
  },
  data() {
    return {
      id: '',
      isCollect: false,
      istimeMoney: 0,
      isSecondCollect: false,
      detailInfo: {
        workType: '',
        num: '',
        describe: '',
        timeMoney: '',
        title: '',
        status: '',
        startTime: '',
        endTime: '',
        wayModel: '',
        endUserTime: '',
        province: '',
        city: '',
        distinguish: '',
      },
      volley: false,
      detail: {},
    };
  },
  onLoad(query) {
    if (query.id) {
      this.id = query.id;
    }
    if (query.pcode) {
      uni.setStorageSync('pcode', query.pcode);
    }
  },
  //发送给朋友
  onShareAppMessage(res) {
    let that = this;
    if (!this.hasLogin) {
      uni.showToast({
        title: '请先登录，再分享',
        icon: 'none',
      });
      return false;
    }
    return {
      title: that.detailInfo.title + ',火热招聘中，赶紧来看看吧！',
      path:
        '/pages/position/detail?id=' +
        that.id +
        '&pcode=' +
        that.userInfo.pcode,
      imageUrl:
        'https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/banner/%E7%94%BB%E6%9D%BF%203.png',
      success(res) {
        console.log('success(res)==', res);
        uni.showToast({
          title: '分享成功',
        });
      },
      fail(res) {
        console.log('fail(res)==', res);
        uni.showToast({
          title: '分享失败',
          icon: 'none',
        });
      },
    };
  },
  //分享到朋友圈
  onShareTimeline(res) {
    let that = this;
    return {
      title: '找兼职/找工作，海量岗位放心选',
      path: '/pages/index/index?pcode=' + that.userInfo.pcode,
      imageUrl:
        'https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/banner/%E7%94%BB%E6%9D%BF%203.png',
      success(res) {
        console.log('success(res)==', res);
        uni.showToast({
          title: '分享成功',
        });
      },
      fail(res) {
        console.log('fail(res)==', res);
        uni.showToast({
          title: '分享失败',
          icon: 'none',
        });
      },
    };
  },
  onShow() {
    this.getDetail(this.id);
  },
  methods: {
    /**
     * 查询职位详情
     */
    async getDetail(id) {
      uni.showLoading({
        title: '加载中...',
        mask: true,
      });
      let res = await this.$apis.getBbbDetails({ id: id });
      this.detail = res;
      uni.hideLoading();
    },

    formatCreateTime(time) {
      if (time == null || time === '') {
        return '未知';
      }
      let str = time.replace(/-/g, '/');
      let date = new Date(str);
      return formatDate(date, 'yyyy.MM.dd');
    },
    async bbreturnMoney() {
		
		if(this.detail.listing=='0'||this.detail.listing==null){
			uni.showModal({
				content:"帮帮下架后方可申请退款！",
				title:"提示",
				showCancel:false
			})
			return;
		}
		
      let param = {
        id: this.id,
      };
	    const ids = this.id;
	  	const prent = this;
	    wx.showModal({
					title:"提示",
					content:"您是否确认退款，退款后帮帮将下架平台？",
					success(res){
						  if (res.confirm) {
							  console.log("用户确认了退款，这里进行业务操作！")
							  
							  // let res =  prent.$apis.bbreturnMoney({ id: ids }).then();
							   
							   	prent.$apis.bbreturnMoney({ id: ids }).then((params) => {
								if(params){
									uni.showModal({
										content:"申请成功！",
										title:"提示",
										showCancel:false
									})
									uni.navigateBack({
										delta: 2
									});
								}else{
									uni.showModal({
										content:"申请失败，请联系在线客服！",
										title:"提示",
										showCancel:false
									})
								}
								 
							
							   
							   }),error((error) => {
							   	 this.btnShow = false;
							       // 异步操作失败的处理逻辑
							       console.error('支付失败122：', error);
							   });
							   
						
							  
							  }else if (res.cancel) {
			  		                // 用户点击了取消按钮，可以不做任何操作，或者给出提示
			  						setTimeout(() => {
			  						  uni.navigateBack();
			  						}, 3000);
			  		            }
					}
			  });
    
	  //这里是支付请求，后续可能会使用到
   //    if (res) {
   //   //   uni.showModal({
   //     //   content: '报名成功，您可以到个人中心查看我的兼职信息！',
   //    //    showCancel: false,
   //        //success(res) {
			//   if (res) {
			// 			const prent = this;
			//   			const price = res.money;
			// 			const bangBId = res.bangBId;
			//   		// 弹出确认对话框
			//   		    wx.showModal({
			//   		        title: '提示',
			//   		        content: '抢单成功，可在（个人中心-我的订单）中查看。点击去支付帮帮订单保证金？',
			//   		        success(res) {
			//   		            if (res.confirm) {
			//   		                // 用户点击了确认按钮，执行下一个功能的逻辑
			//   		                // 这里可以编写你需要执行的代码，比如页面跳转等
			//   		                // 例如：wx.navigateTo({ url: '/pages/nextFunction/nextFunction' });
			  						
			//   						// const params =  prent.$apis.payWxCreate( {money:price ,bangBId:bangBId})
			//   						// const params =  prent.$apis.payWxCreate( ).then(result) =>{
			  							
			//   						// 	console.log("支付接口返回1",params)
			//   						// 	console.log("支付接口返回2",params.data)
			//   						// }
			//   						const reqBb =  {money:price  ,bangBId:bangBId,type:4}
			  						
			//   						prent.$apis.payWxCreateBb(reqBb).then((params) => {
			//   						    // 异步操作成功的处理逻辑
			//   						    console.log('支付成功：', params);
			  											
			//   										   const res =	  uni.requestPayment({
			//   												  provider: params.package,
			//   												  timeStamp: params.timestamp,
			//   												  nonceStr: params.noncestr,
			//   												  package: params.partnerid,
			//   												  signType: "RSA",
			//   												  paySign: params.sign,
			//   												  success: (res) => {
			//   												uni.showToast({
			//   												  title: '恭喜您支付成功！',
			//   												})
			//   							//业务逻辑
			//   												 // this.$mRouter.push({
			  													 
			//   												 //     //route: 'your-target-route' ,// 替换为您的目标路由名称或路径
			//   												 // 	route: this.$mRoutesConfig.index
			  												 	
			//   												 // });
			//   												 // 在第3级页面内 navigateBack，将返回第一层页面
			//   												 uni.navigateBack({
			//   												 	delta: 2
			//   												 });
			//   											setTimeout(() => {
			//   											    this.$mRouter.push({
			//   											      route: this.$mRoutesConfig.index
			//   											    });
			//   											  }, 1000);
			  											  
			//   												  },
			  												  		
			//   												  fail: (err) => {
			//   													  uni.showToast({
			//   													    title: '支付失败',err
			//   													  })
			//   													  	console.log("支付err返回",err)
			//   													//this.getSubscribe('0')
			//   												  }
			//   							      });
			//   						}),error((error) => {
			//   						    // 异步操作失败的处理逻辑
			//   						    console.error('支付失败122：', error);
			//   						});
			  
			//   									      // 调用微信支付接口
			//   									    //  const res = await uni.requestPayment(payParams)
			//   										//console.log("支付接口返回"+params.data)
			  								
			//   		            } else if (res.cancel) {
			//   		                // 用户点击了取消按钮，可以不做任何操作，或者给出提示
			//   						setTimeout(() => {
			//   						  uni.navigateBack();
			//   						}, 3000);
			//   		            }
			//   		        }
			//   		    });
			//     // setTimeout(() => {
			//     //   uni.navigateBack();
			//     // }, 1000);
			//   }
   //          // uni.navigateBack({
   //          //   delta: 1,
   //          // });
			
   //      //  },
		  
   //     // });
   //    }
    },
    collect(isC) {
      if (this.volley) {
        uni.showToast({ title: '请勿频繁操作！', icon: 'error' });
        return;
      }
      if (isC) {
        let res = this.$apis.postCollect({ id: this.id });
        if (res) {
          uni.showToast({ title: '收藏成功', icon: 'success' });
        } else {
          uni.showToast({ title: '处理异常', icon: 'error' });
        }
      } else {
        let res = this.$apis.postCollectCancel({ id: this.id });
        if (res) {
          uni.showToast({ title: '取消成功', icon: 'success' });
        } else {
          uni.showToast({ title: '处理异常', icon: 'error' });
        }
      }
      this.volley = true;
      setTimeout(() => {
        this.volley = false;
      }, 3000);
      this.isCollect = isC;
    },
  },
};
</script>

<style lang="scss" scoped>
.m-position {
  padding-bottom: 150upx;
  .postName {
    margin: 20upx 4% 20upx 4%;
    font-weight: bold;
    font-size: $font-size-34;
    line-height: 50upx;
    .bl {
      border-radius: 6upx;
      float: left;
      margin-right: 20upx;
      background-color: #36b957;
      margin-top: 5upx;
      height: 40upx;
      width: 10upx;
    }
  }
  .mark {
    color: white;
    line-height: 50upx;
    width: 140upx;
    text-align: center;
    float: left;
  }
  .info-box {
    background-image: url(https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/img/label1.png);
    background-size: 220upx 80upx;
    background-repeat: no-repeat;
    background-color: $bgcolor_white;
    padding: 0upx 30upx 30upx 30upx;
    // margin-bottom: 20upx;
    .info-item {
      line-height: 60upx;
      color: #666;
    }
    .right {
      color: #36b957;
      font-weight: bold;
      line-height: 65upx;
      float: right;
    }
  }
  .info-bttom {
    display: flex;
    text-align: center;
    line-height: 60upx;
    .deadline {
      flex: 1;
    }
    .surplus {
      flex: 1;
    }
  }
}
.t {
  color: black;
  font-weight: bold;
}

.label {
  padding: 30upx 0upx;
  border-top: 4upx dashed #ccc;
  height: 40upx;
  width: 100%;
  margin-top: 20upx;
  .title-parttime {
    color: #66666e;
    border: 1upx solid #36b957;
    background-color: #f5ffe6;
    font-size: $uni-font-size-sm;
    margin-right: 15upx;
    padding: 4upx 15upx;
    border-radius: 6upx;
    line-height: 40upx;
    float: left;
  }
}
.title {
  margin-top: 10upx;
  .title-name {
    font-weight: bold;
    font-size: $uni-font-size-lg;
  }
}
.btn-box {
  position: fixed;
  bottom: 0px;
  display: flex;
  align-items: center;
  width: 92%;
  padding: 30upx 4% 30upx 4%;
  background-color: white;
  .apprise {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .collect {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .enroll-btn {
    flex: 3;
    background-color: #9cc8b2;
    color: white;
    border-radius: 45upx;
  }
}
.fx {
  flex: 1;
  font-size: 35upx;
  line-height: 35upx;
}
.status {
  margin-left: 30upx;
  padding: 10upx 14upx;
  font-size: 24upx;
  border-radius: 30upx;
}
.inprogress {
  border: 1upx solid #36b957;
  background-color: #e1f3c7;
}
.end {
  border: 1px solid #b93636;
  background-color: #f3c7c7;
}
.iconfont {
  margin-right: 10upx;
  font-size: 35upx;
}
</style>
